<template>
    <div>
    <heads></heads>
    <div class="padding-rl10">
        <div class="from-box">
            <div class="title">用户登录</div>
            <x-input  placeholder="请输入手机号码" v-model="mobile">
            </x-input>
            <x-input  placeholder="请输入密码" type="password" v-model="password">
            </x-input>
            <br/>
            <x-button type="primary" @click.native="login">登录</x-button>
            <div class="link">
                <router-link to="/register" class="left" >注册账号</router-link>
                <router-link to="/forgetPassword" class="right">忘记密码</router-link>
            </div>
        </div>
    </div>
        <toast v-model="showPositionValue"  :time="1000"  width="14.6em" :type="type" is-show-mask :text="message" :position="position"></toast>
    </div>

</template>

<script>
    import {XInput, XButton, Divider,Toast} from 'vux'
    import heads from  '../header';
    export default {
        name: "login",
        components: {
            XInput,
            XButton,
            heads,
            Toast

        },
        data() {
            return {
                mobile: null,
                password: null,
                showPositionValue:false,
                position:'middle',
                message:null,
                type:'success'
            }
        },
        methods: {
            login() {
                var _this=this;
                this.$axios.post(this.$axios.defaults.baseURL+'login',{
                    mobile:_this.mobile,
                    password:_this.password
                }).then(function (res) {
                    _this.message=res.data.msg;
                    _this.showPositionValue=true;
                    if(res.data.state==false){
                        _this.type='warn'
                    }else{
                        _this.type='success';
                        window.localStorage.setItem('access_token',res.data.data.access_token)
                        _this.userInfo();

                    }

                }).catch(function (err) {
                    console.log(err)
                })

            },
            userInfo(){
                var _this=this;
                this.$axios.defaults.headers.common['Authorization'] = 'Bearer ' + window.localStorage.getItem('access_token');
                this.$axios.get(this.$axios.defaults.baseURL+'userInfo',{
                }).then(function (res) {
                    if(res.data.state){
                        _this.$store.commit('userInfo',{
                            user_id:res.data.data.id,
                            thumb:res.data.data.thumb,
                            name:res.data.data.name,
                            mobile:res.data.data.mobile,
                            article_count:res.data.data.article_count,
                            like_user_count:res.data.data.link_user_count,
                            fans_count:res.data.data.fansCount
                        })
                        setTimeout(function () {
                            _this.$router.push({path:'user'});
                        },500);
                    }else {
                        console.log('失败')
                    }
                }).catch(function (err) {
                    console.log(err)
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    @import "../../assets/css/comm.less";
</style>